<template>
  <div class="brand-item">
    <div
      class="brand-border"
      @click="clickBorder()"
      :class="{'clicked':index==clickIndex}"
    >
      <img
        :src="brandItem.logoUrl"
        alt="默认凯诘的品牌logo"
        v-if="brandItem.logoUrl"
      >
      <img
        src="~@/assets/def-logo.png"
        alt="默认凯诘logo"
        v-else
      >
    </div>
    {{brandItem.brandName}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      clickIndex: -1
    };
  },
  props: {
    brandItem: {
      type: Object,
      required: true
    },
    index: {
      type: Number
    }
  },
  methods: {
    clickBorder() {
      this.clickIndex = this.index;
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixin";
.brand-box {
  display: flex;
  flex-wrap: wrap;
}
.brand-item {
  width: 80px;
  padding: 20px 10px 0 10px;
  text-align: center;
  cursor: pointer;
}

.brand-border {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid #ededed;
  padding: 8px;
  margin: 0 auto 10px;
  img {
    width: 100%;
  }
}
.brand-border:active {
  border: 1px solid #cb2d00;
}
.brand-border:hover {
  padding: 2px;
}

@media (max-width: 970px) {
  .brand-item {
    margin: 10px 10px 0 0;
  }
}
</style>